<template>
  <div class="register-bg">
    <div class="register-center">
      <div class="register-card">
        <div class="register-header">
          <div class="logo">
            <el-icon size="36"><User /></el-icon>
          </div>
          <h2 class="register-title">创建账户</h2>
          <p class="register-subtitle">欢迎加入抽奖系统</p>
        </div>

        <el-form
            :model="form"
            :rules="rules"
            ref="registerForm"
            @submit.prevent
            class="register-form"
        >
          <el-form-item prop="username">
            <div class="input-wrapper">
              <div class="input-group">
                <el-icon class="input-icon"><User /></el-icon>
                <el-input
                    v-model="form.username"
                    placeholder="用户名"
                    clearable
                    class="register-input"
                    @keyup.enter="register"
                />
              </div>
            </div>
          </el-form-item>

          <el-form-item prop="password">
            <div class="input-wrapper">
              <div class="input-group">
                <el-icon class="input-icon"><Key /></el-icon>
                <el-input
                    v-model="form.password"
                    type="password"
                    placeholder="密码"
                    show-password
                    class="register-input"
                    @keyup.enter="register"
                />
              </div>
            </div>
          </el-form-item>

          <el-form-item prop="confirmPassword">
            <div class="input-wrapper">
              <div class="input-group">
                <el-icon class="input-icon"><Lock /></el-icon>
                <el-input
                    v-model="form.confirmPassword"
                    type="password"
                    placeholder="确认密码"
                    class="register-input"
                    @keyup.enter="register"
                />
              </div>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="button-wrapper">
              <el-button
                  type="primary"
                  :loading="loading"
                  @click="register"
                  class="register-button"
                  round
              >
                {{ loading ? '注册中...' : '注册' }}
              </el-button>
            </div>
          </el-form-item>
        </el-form>

        <div class="login-link">
          已有账户？
          <el-link type="primary" @click="$emit('to-login')" :underline="false">
            立即登录
          </el-link>
        </div>

        <el-alert
            v-if="msg"
            :title="msg"
            :type="msgType"
            show-icon
            class="register-alert"
            closable
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import request from '../api/request'
import {User, Key, Lock} from '@element-plus/icons-vue'

const emit = defineEmits(['to-login'])

const form = ref({
  username: '',
  password: '',
  confirmPassword: ''
})

const rules = {
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 3, max: 20, message: '用户名长度为3-20个字符', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 20, message: '密码长度为6-20个字符', trigger: 'blur'}
  ],
  confirmPassword: [
    {required: true, message: '请确认密码', trigger: 'blur'},
    {
      validator: (rule, value, callback) => {
        if (value !== form.value.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

const registerForm = ref()
const msg = ref('')
const msgType = ref('info')
const loading = ref(false)

const register = async () => {
  if (loading.value) return

  await registerForm.value.validate(async valid => {
    if (!valid) return

    loading.value = true
    msg.value = ''

    try {
      // 修改请求路径，去掉多余的 /api
      const res = await request.post('/user/register', {
        username: form.value.username,
        password: form.value.password
      })

      msg.value = res.data.message
      msgType.value = res.data.success ? 'success' : 'error'

      if (res.data.success) {
        // 注册成功后自动跳转到登录页面
        setTimeout(() => {
          emit('to-login')
        }, 1500)
      }
    } catch (e) {
      msg.value = '注册失败，请检查网络连接'
      msgType.value = 'error'
    } finally {
      loading.value = false
    }
  })
}
</script>

<style scoped>
.register-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #fff5e6 0%, #ffe6cc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.register-center {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.register-card {
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(255, 153, 95, 0.2);
  padding: 40px 35px 30px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 184, 108, 0.3);
  position: relative;
  overflow: hidden;
}

.register-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 184, 108, 0.15) 0%, transparent 70%);
  z-index: -1;
}

.register-header {
  text-align: center;
  margin-bottom: 30px;
}

.logo {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #ff9a3d 0%, #ff6a00 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  box-shadow: 0 5px 15px rgba(255, 154, 61, 0.3);
}

.logo .el-icon {
  color: white;
  font-size: 32px;
}

.register-title {
  color: #333;
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 5px;
}

.register-subtitle {
  color: #666;
  font-size: 15px;
  margin: 0;
}

.register-form {
  width: 100%;
}

.input-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 300px;
}

.input-icon {
  position: absolute;
  left: 15px;
  z-index: 1;
  color: #ff9a3d;
  font-size: 18px;
}

.register-input :deep(.el-input__wrapper) {
  padding-left: 45px;
  border-radius: 10px;
  background: rgba(255, 245, 230, 0.6);
  border: 1px solid rgba(255, 184, 108, 0.5);
  box-shadow: none;
  transition: all 0.3s ease;
  width: 100%;
}

.register-input :deep(.el-input__wrapper:hover) {
  border-color: rgba(255, 154, 61, 0.8);
}

.register-input :deep(.el-input__wrapper.is-focus) {
  border-color: #ff9a3d;
  box-shadow: 0 0 0 2px rgba(255, 154, 61, 0.2);
}

.register-input :deep(.el-input__inner) {
  color: #333;
  padding: 18px 15px;
  background: transparent;
}

.button-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.register-button {
  width: 100%;
  max-width: 300px;
  padding: 18px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #ff9a3d 0%, #ff6a00 100%);
  border: none;
  color: white;
  margin-top: 10px;
  box-shadow: 0 5px 15px rgba(255, 154, 61, 0.4);
  transition: all 0.3s ease;
}

.register-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 154, 61, 0.6);
}

.register-button:active {
  transform: translateY(0);
}

.login-link {
  text-align: center;
  color: #666;
  font-size: 14px;
  margin: 20px 0 10px;
}

.login-link :deep(.el-link__inner) {
  color: #ff9a3d;
  font-weight: 500;
}

.register-alert {
  margin-top: 20px;
  border-radius: 10px;
  background: rgba(255, 245, 230, 0.6);
  border: 1px solid rgba(255, 184, 108, 0.5);
}

@media (max-width: 480px) {
  .register-card {
    padding: 30px 20px;
  }

  .input-group {
    max-width: 100%;
  }

  .register-button {
    max-width: 100%;
  }
}
</style>